<template>
	<view class="u-box">
		<view class="hd-b">
			<!-- #ifdef MP-WEIXIN -->
			<view class="my-title">
				个人中心
			</view>
			<!-- #endif -->
			<view class="my-info">
				<image class="h-l" :src="userInfo.member_info.avatar||'/static/shizi.jpg'" ></image>
				<view class="h-r">
					<view class="l-1">{{userInfo.member_info.nickname||''}}</view>
					<view class="l-2">我的ID：{{userInfo.member_info.id||''}}</view>
					<view class="l-2">拼团积分：{{userInfo.red_points||0}}</view>
				</view>
			</view>
			<view class="my-shuju">
				<view class="s-t">数据看板</view>
				<view class="s-l">
					<view class="s-i">
						<view class="s-i-v">{{userInfo.consumption_amount||0}}</view>
						<view class="s-i-t">消费金额</view>
					</view>
					<view class="s-i" @click="$navTo('/pages/groupbuy/businessQuota?type=1')">
						<view class="s-i-v">{{userInfo.available_meters||0}}</view>
						<view class="s-i-t">可用米分</view>
					</view>
					<view class="s-i" @click="$navTo('/pages/user/withdrawal')">
						<view class="s-i-v">{{userInfo.available_amount||0}}</view>
						<view class="s-i-t">可用收入</view>
					</view>
					<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=1')">
						<view class="s-i-v">{{userInfo.consumption_subsidy.total_sendmoney||0}}</view>
						<view class="s-i-t">消费补贴</view>
					</view>
					<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=2')">
						<view class="s-i-v">{{userInfo.commission||0}}</view>
						<view class="s-i-t">佣金奖励</view>
					</view>
					<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=3')">
						<view class="s-i-v">{{userInfo.red_packet||0}}</view>
						<view class="s-i-t">红包收入</view>
					</view>
				</view>
			</view>
			<!-- 分隔线 -->
			<image class="f-g" src="https://img.jinghushi.com/images/9/2025/10/gEm4KhahAKPAg4hCP3j4akzjeEeZ7K.png"
				 />
		</view>

		<!-- 下部模块 -->
		<view class="b-box">
			<!-- 我的订单 -->
			<view class="m-b">
				<view class="m-t">订单信息</view>
				<view class="m-l m-l1">
					<view class="m-i" @click="$navTo('/pages/user/order?type=1')">
						<view class="m-i-i-b">
							<image class="m-i-img" src="/static/user/pin.png"></image>
						</view>
						<text class="n-i-n">3人拼团订单</text>
					</view>
					<view class="m-i" @click="$navTo('/pages/user/order?type=2')">
						<view class="m-i-i-b">
							<image class="m-i-img" src="/static/user/mang.png"></image>
						</view>
						<text class="n-i-n">50拼团订单</text>
					</view>
					<view class="m-i" @click="$navTo('/pages/user/order?type=3')">
						<view class="m-i-i-b">
							<image class="m-i-img" src="/static/user/ti.png"></image>
						</view>
						<text class="n-i-n">提货订单</text>
					</view>
				</view>
			</view>
			<!-- 详细数据 -->
			<view class="data_box">
				<!-- <view class="m-b">
					<view class="d_box">
						<view class="m-t">详细数据</view>
						<view class="m_day">
							<text class="m_time " :class="{'is_c':type==1}" @click="changStatus(1)">日</text>
							<text class="m_time" :class="{'is_c':type==2}" @click="changStatus(2)">周</text>
							<text class="m_time" :class="{'is_c':type==3}" @click="changStatus(3)">月</text>
							<text class="m_time" :class="{'is_c':type==0}" @click="changStatus(0)">全部</text>
						</view>
					</view>
					<view class="my-shuju2">
						<view class="s-l">
							<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=3')">
								<view class="s-i-v">{{statistics.red_points||0}}</view>
								<view class="s-i-t">领取红包</view>
							</view>
							<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=2')">
								<view class="s-i-v">{{statistics.commission||0}}</view>
								<view class="s-i-t">发放佣金</view>
							</view>
							<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=1')">
								<view class="s-i-v">{{statistics.unreceived_subsidy||0}}</view>
								<view class="s-i-t">待补贴金额</view>
							</view>
							<view class="s-i" @click="$navTo('/pages/order/accountDetails?type=1')">
								<view class="s-i-v">{{statistics.already_subsidy||0}}</view>
								<view class="s-i-t">实际已补贴</view>
							</view>
							<view class="s-i">
								<view class="s-i-v">{{statistics.participation_num||0}}</view>
								<view class="s-i-t">参与次数</view>
							</view>
							<view class="s-i">
								<view class="s-i-v">{{statistics.prizewinning_num||0}}</view>
								<view class="s-i-t">拼中次数</view>
							</view>
						</view>
					</view>
				</view> -->
				<!-- 常用功能 -->
				<view class="m-b">
					<view class="m-t">常用功能</view>
					<view class="m-l m-l2">
						<view class="m-i">
							<view class="m-i-i-b" @click="$navTo('/pages/address/addresslist')">
								<image class="m-i-img" src="/static/user/dingwei.png"></image>
							</view>
							<text class="n-i-n">收货地址</text>
						</view>
						<!-- <view class="m-i" @click="$navTo('/pages/user/QRcode')">
						<view class="m-i-i-b">
							<image class="m-i-img" src="/static/user/haibao.png" ></image>
						</view>
						<text class="n-i-n">推广海报</text>
						</view> -->
						<!-- #ifndef MP-WEIXIN -->
						<view class="m-i">
							<view class="m-i-i-b" @click="$navTo('/pages/money/topup')">
								<image class="m-i-img" src="/static/user/topup.png"></image>
							</view>
							<text class="n-i-n">米券充值</text>
						</view>
						<!-- #endif -->
						<view class="m-i" v-if="ispower==1">
							<view class="m-i-i-b" @click="$navTo('/pages/user/accountSwitch')">
								<image class="m-i-img" src="/static/user/mem/qiehuan.png"></image>
							</view>
							<text class="n-i-n">账号切换</text>
						</view>
						<view class="m-i" @click="$navTo('/pages/set/set')">
							<view class="m-i-i-b">
								<image class="m-i-img" src="/static/user/shezhi.png"></image>
							</view>
							<text class="n-i-n">设置</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					member_info: {},
					consumption_subsidy: {}
				}, //个人数据
				type: 1,
				statistics: {},
				ispower: 0
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			changStatus(val) {
				if (val == this.type) return
				this.type = val
				this.getUserStatistics()
			},
			init() {
				this.getInfo()
				this.getMain();
				// this.getUserStatistics()
			},
			getMain(){
				this.$axios('Center/main', "POST", 'member').then(res => {
					this.ispower = res.data.data.ispower;
				})
			},
			async getInfo() {
				const res = await this.$axios('UserCenter/idx', 'POST', 'pt')
				if (res.data.code == 200) {
					this.userInfo = res.data.data || this.userInfo
				}
			},
			async getUserStatistics() {
				const res = await this.$axios('UserStatistics/idx', 'POST', 'pt', {
					sta_type: this.type
				})
				if (res.data.code == 200) {
					this.statistics = res.data.data
				}
			}
		}
	}
</script>
<style scoped lang='scss'>
	.data_box {
		.my-shuju {
			width: 690rpx;
			border-radius: 30rpx;
			margin: 0 auto;
			padding: 10rpx;

			.s-t {
				font-size: 28rpx;
				font-weight: bold;
				color: #13001E;
				position: relative;
				padding-left: 20rpx;
			}

			.s-t:before {
				content: '';
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 8rpx;
				height: 20rpx;
				background: #fff;
				border-radius: 6rpx;
			}

			.s-l {
				display: flex;
				flex-wrap: wrap;

				.s-i {
					width: calc(100% / 2);
					text-align: center;
					margin-top: 10rpx;
					position: relative;

					.s-i-v {
						font-size: 36rpx;
						line-height: 52rpx;
						font-weight: bold;
						color: #13001E;
					}

					.s-i-t {
						font-size: 24rpx;
						height: 34rpx;
						color: #13001E;
					}
				}

				.s-i:before {
					content: '';
					position: absolute;
					width: 2rpx;
					height: 68rpx;
					background: linear-gradient(180deg, rgba(19, 0, 30, 0) 0%, #13001E 51%, rgba(19, 0, 30, 0) 100%);
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.s-i:nth-of-type(2n + 2):before {
					width: 0;
				}
			}
		}

		.d_box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.m_day {
				padding: 0 20rpx;
				height: 56rpx;
				background: #F5F3F7;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 8rpx;

				.m_time {
					width: 76rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					color: #5B5B5B;
					font-size: 28rpx;
					font-weight: bold;
					text-align: center;
					line-height: 48rpx;
					background: #F5F3F7;
					margin-left: 16rpx;
				}

				.m_time:first-child {
					margin-left: 0;
				}

				.is_c {
					background-color: #fff;
					color: #13001E;
				}
			}
		}
	}

	.u-box {
		background: #fdf8ff;
		font-family: Microsoft YaHei;
		font-variation-settings: "opsz" auto;
		min-height: calc(100vh - var(--window-bottom));

		.hd-b {
			background: url(https://img.jinghushi.com/images/9/2025/10/RuMZeXjmvjD22G26yVB76ugvUQUB1U.png) no-repeat 0 0;
			background-size: 100% 100%;
			padding-top: calc(var(--status-bar-height) + var(--window-top) + 25px);
			position: relative;

			.my-title {
				font-size: 34rpx;
				font-weight: bold;
				line-height: 40px;
				color: #000000;
				text-align: center;
			}

			.my-info {
				padding: 20rpx 20rpx 30rpx;
				display: flex;

				.h-l {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.h-r {
					padding-left: 15rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;

					.l-1 {
						font-size: 32rpx;
						font-weight: bold;
						color: #13001E;
					}

					.l-2 {
						font-size: 24rpx;
						color: #5B5B5B;
					}
				}
			}

			.my-shuju {
				width: 690rpx;
				border-radius: 30rpx;
				background: linear-gradient(90deg, #B62BF0 0%, #8813E2 100%);
				box-shadow: inset 0rpx 8rpx 20rpx 0rpx rgba(255, 255, 255, 0.5);
				margin: 0 auto;
				padding: 10rpx 26rpx 50rpx;

				.s-t {
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					position: relative;
					padding-left: 20rpx;
				}

				.s-t:before {
					content: '';
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					width: 8rpx;
					height: 20rpx;
					background: #fff;
					box-shadow: inset 0px 0rpx 4rpx 4rpx rgba(255, 255, 255, 0.5);
					border-radius: 6rpx;
				}

				.s-l {
					display: flex;
					flex-wrap: wrap;

					.s-i {
						width: calc(100% / 3);
						color: #FFFFFF;
						text-align: center;
						margin-top: 10rpx;
						position: relative;

						.s-i-v {
							font-size: 32rpx;
							line-height: 52rpx;
							font-weight: bold;
						}

						.s-i-t {
							font-size: 24rpx;
							height: 34rpx;
						}
					}

					.s-i:before {
						content: '';
						position: absolute;
						width: 2rpx;
						height: 68rpx;
						background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 51%, rgba(255, 255, 255, 0) 100%);
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}

					.s-i:nth-of-type(3n + 3):before {
						width: 0;
					}
				}
			}



			/* 分隔线 */
			.f-g {
				position: absolute;
				height: calc(100vw * 64 / 1500);
				width: 100%;
				bottom: -1rpx;
				z-index: 1;
			}
		}

		/* 下部模块 */
		.b-box {
			background: #fdf8ff;

			.m-b {
				background: #FFFFFF;
				border-radius: 16rpx;
				width: 690rpx;
				margin: 0 auto 24rpx;
				padding: 20rpx;
				box-sizing: border-box;

				.m-t {
					font-size: 28rpx;
					font-weight: bold;
					color: #13001E;
					position: relative;
					padding: 0 24rpx;

					&:before {
						content: '';
						width: 8rpx;
						height: 20rpx;
						background: #9A1FE8;
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						border-radius: 10rpx;
						box-shadow: 0px 0px 2rpx 2rpx rgba(81, 0, 132, 0.1);
					}
				}

				.m-l {
					display: flex;
					justify-content: space-between;

					.m-i {
						text-align: center;
						padding-top: 30rpx;

						.m-i-i-b {
							.m-i-img {
								width: 50rpx;
								height: 50rpx;
							}
						}

						.n-i-n {
							padding-top: 10rpx;
							font-family: 思源黑体;
							font-size: 24rpx;
							color: #13001E;
						}

					}
				}

				.m-l1 {
					padding: 0 40rpx;
				}

				.m-l2 {
					justify-content: flex-start;

					.m-i {
						margin-right: 34rpx;
					}
				}
			}
		}
	}

	.my-shuju2 {
		width: 100%;
		border-radius: 30rpx;
		/* background-color: pink; */
		margin: 20rpx auto 0;
		padding: 10rpx 20rpx 30rpx;

		.s-t {
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			padding-left: 20rpx;
		}

		.s-t:before {
			content: '';
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			width: 8rpx;
			height: 20rpx;
			background: #fff;
			box-shadow: inset 0px 0rpx 4rpx 4rpx rgba(255, 255, 255, 0.5);
			border-radius: 6rpx;
		}

		.s-l {
			display: flex;
			flex-wrap: wrap;

			.s-i {
				width: calc(100% / 2);
				color: #FFFFFF;
				text-align: center;
				margin-top: 10rpx;
				position: relative;

				.s-i-v {
					font-size: 32rpx;
					line-height: 52rpx;
					color: #13001E;
					font-weight: bold;
				}

				.s-i-t {
					font-size: 24rpx;
					color: #13001E;
					height: 34rpx;
				}
			}

			.s-i:before {
				content: '';
				position: absolute;
				width: 2rpx;
				height: 68rpx;
				background: linear-gradient(180deg, rgba(19, 0, 30, 0) 0%, #13001E 51%, rgba(19, 0, 30, 0) 100%);
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.s-i:nth-of-type(2n + 2):before {
				width: 0;
			}
		}
	}
</style>